import React from "react";
import { Avatar, Form, Button, Input } from "antd";
import { useAppSelector } from "../../app/hooks";
import styles from "./index.module.scss";

interface IProps {
  chatList: any;
  sendMsg: (data: any) => void;
}

export default function ChatWindow({ chatList, sendMsg }: IProps) {
  const username = useAppSelector((state) => state.user.username);

  const onFinish = (values: any) => {
    console.log("Success:", values);

    sendMsg({
      type: 'msg',
      id: Date.now(),
      body: values.chatmsg,
      to: "all",
      from: username,
    });
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };

  const chatDom = chatList.map((item: any) => {
    return (
      <div
        className={[
          styles.chat_list_item,
          username == item.from && styles.chat_list_item_self,
        ].join(" ")}
        key={item.id}
      >
        <Avatar size={30} src="https://randomuser.me/api/portraits/men/1.jpg" />
        <p className={styles.chat_list_item_body}>{item.body}</p>
      </div>
    );
  });

  return (
    <div className={styles.chat_window}>
      <div className={styles.chat_list}>
        {chatDom}

        {/* <div
          className={[styles.chat_list_item, styles.chat_list_item_self].join(
            " "
          )}
        >
          <Avatar
            size={30}
            src="https://randomuser.me/api/portraits/men/2.jpg"
          />
          <p className={styles.chat_list_item_body}>
            一大段聊天文字信息内容的,一大段聊天文字信息内容的,一大段聊天文字信息内容的
          </p>
        </div> */}
      </div>

      <div className={styles.chat_input}>
        <Form
          name="basic"
          layout="inline"
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            className={styles.chat_input_label}
            name="chatmsg"
            rules={[
              { required: true, message: "Please type something to send!" },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item>
            <Button
              className={styles.chat_send}
              type="primary"
              htmlType="submit"
            >
              发送
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
